<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码强度检查工具</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>密码强度检查工具</h1>

        <div class="password-box">
            <input type="password" id="passwordInput" placeholder="输入密码...">
            <button id="checkBtn">检查强度</button>
            <button id="toggleVisibility">👁️</button>
        </div>

        <div class="strength-meter">
            <div class="strength-bar" id="strengthBar"></div>
        </div>

        <div class="strength-text" id="strengthText">密码强度: 未检测</div>

        <div class="criteria">
            <h3>强密码应包含:</h3>
            <ul>
                <li id="length">至少8个字符</li>
                <li id="uppercase">大写字母 (A-Z)</li>
                <li id="lowercase">小写字母 (a-z)</li>
                <li id="number">数字 (0-9)</li>
                <li id="special">特殊字符 (!@#$%等)</li>
            </ul>
        </div>

        <div class="suggestions" id="suggestions"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>